"use client";
import React, {useState} from "react";
import {Button, Fieldset, Group, Modal, NumberInput, Select, Stack, TextInput} from "@mantine/core";
import {useDisclosure} from "@mantine/hooks";
import {useForm} from "@mantine/form";
import {IconPlus} from "@tabler/icons-react";
import {NodeProps} from "./prop";

function AddEdge() {
  // [1] 易用性：按钮的loading状态（VPN访问时网络不佳，loading做到前端防抖，增强用户体验）
  const [loading, setLoading] = useState(false);

  // [2] 核心功能：表单收集
  const form = useForm<NodeProps>({
    mode: "uncontrolled",
    // initialValues: {},
    // validate: {},
  });
  return (
    <form
      onSubmit={form.onSubmit((values) => {
        setLoading(true);
        // handleSubmit(values);
      })}
    >
      <Stack>
        <Fieldset legend="选择已有节点">
          <Group grow>
            <Select
              label="选择节点"
              placeholder="请选择节点"
              key={form.key("nodeA")}
              {...form.getInputProps("nodeA")}
              // 需要从后端获取列表
              data={["北京_N2_BB_5", "上海_N2_BB_5", "广州_N2_BB_5"]}
              searchable
              clearable
              withAsterisk
            />
            <Select
              label="选择节点"
              placeholder="请选择节点"
              key={form.key("nodeB")}
              {...form.getInputProps("nodeB")}
              // 需要从后端获取列表
              data={["北京_N2_BB_5", "上海_N2_BB_5", "广州_N2_BB_5"]}
              searchable
              clearable
              withAsterisk
            />
          </Group>
        </Fieldset>

        <Fieldset legend="系统自动计算">
          <Group grow>
            <TextInput
              disabled
              label="A端节点ID"
              placeholder="系统自动计算"
              key={form.key("edgeNodeAId")}
              {...form.getInputProps("edgeNodeAId")}
            />
            <TextInput
              disabled
              label="Z端节点ID"
              placeholder="系统自动计算"
              key={form.key("edgeNodeZId")}
              {...form.getInputProps("edgeNodeZId")}
            />
          </Group>
          <Group grow>
            <TextInput
              disabled
              label="A端节点名称"
              placeholder="系统自动计算"
              key={form.key("edgeNodeAName")}
              {...form.getInputProps("edgeNodeAName")}
            />
            <TextInput
              disabled
              label="Z端节点名称"
              placeholder="系统自动计算"
              key={form.key("edgeNodeZName")}
              {...form.getInputProps("edgeNodeZName")}
            />
          </Group>
          <Group grow>
            <TextInput
              disabled
              label="局向ID"
              placeholder="系统自动计算"
              key={form.key("nodeB")}
              {...form.getInputProps("nodeB")}
            />
            <TextInput
              disabled
              label="局向名称"
              placeholder="系统自动计算"
              key={form.key("nodeB")}
              {...form.getInputProps("nodeB")}
            />
          </Group>
        </Fieldset>

        <Fieldset legend="配置局向属性">
          <Group grow>
            <NumberInput
              label="IGP路由开销"
              placeholder="请输入IGP路由开销"
              key={form.key("edgeIGP")}
              {...form.getInputProps("edgeIGP")}
              min={0}
              withAsterisk
            />
            <NumberInput
              label="局向总带宽（Gbps）"
              placeholder="请输入局向总带宽"
              key={form.key("edgeBWTotal")}
              {...form.getInputProps("edgeBWTotal")}
              min={0}
              withAsterisk
            />
          </Group>
          <Group grow>
            <NumberInput
              label="400G链路数量"
              placeholder="400G"
              key={form.key("edge400G")}
              {...form.getInputProps("edge400G")}
              min={0}
              withAsterisk
            />
            <NumberInput
              label="100G链路数量"
              placeholder="100G"
              key={form.key("edge100G")}
              {...form.getInputProps("edge100G")}
              min={0}
              withAsterisk
            />
            <NumberInput
              label="10G链路数量"
              placeholder="10G"
              key={form.key("edge10G")}
              {...form.getInputProps("edge10G")}
              min={0}
              withAsterisk
            />
            <NumberInput
              label="1G链路数量"
              placeholder="1G"
              key={form.key("edge1G")}
              {...form.getInputProps("edge1G")}
              min={0}
              withAsterisk
            />
          </Group>
        </Fieldset>

        <Group justify="flex-end">
          <Button variant="default">取消</Button>
          <Button variant="filled">确定</Button>
        </Group>
      </Stack>
    </form>
  );
}

export function AddEdgeButton({disabled}: {disabled: boolean}) {
  const [opened, {open, close}] = useDisclosure(false);
  return (
    <>
      <Button size="xs" leftSection={<IconPlus size={12} />} onClick={open} disabled={disabled}>
        新增局向
      </Button>
      <Modal size="lg" title="新增局向" opened={opened} onClose={close}>
        <AddEdge />
      </Modal>
    </>
  );
}
